<template>
  <div class="home">
    <HomeNavBar></HomeNavBar>
    <div class="banner">
      <img src="@/assets/img/home/banner.webp" alt="banner-img" />
    </div>
    <!-- <HomeSerachBox :hotSuggests="hotSuggests"></HomeSerachBox> -->
    <HomeSerachBox></HomeSerachBox>
    <home-categories />
    <div class="search-bar" v-if="isShowSearch">
      <search-bar />
    </div>
    <home-content />
  </div>
</template>

<script setup>
import {ref, watch, computed } from 'vue'
import HomeNavBar from "./components/home-nav-bar.vue"
import HomeSerachBox from "./components/home-search-box.vue"
import HomeCategories from "./components/homt-categories.vue"
import HomeContent from './components/home-content.vue'
import SearchBar from '@/components/search-bar/search-bar.vue'

import Request from '@/services/request/index.js'
import useHomeStore from '@/stores/modules/home.js'
import useScroll from '@/hooks/useScroll.js'

const homeStore = useHomeStore();
homeStore.fetchHotSuggests();
homeStore.fetchCategories();
homeStore.fetchHouseList();

const isShowSearch = computed(() => {
  return scrollTop.value >= 360;
});

const { scrollTop } = useScroll(() => {
  homeStore.fetchHouseList();
});

// watch(scrollTop, (newValue) => {
//   isShowSearch.value = newValue > 100;
// })

// const hotSuggests = ref([]);
// const categories = ref([]);

// Request.get({
//   url: '/home/hotSuggests'
// }).then(res => {
//   hotSuggests.value = res.data;
  
// })

// Request.get({
//   url: '/home/categories',
// }).then(res => {
//   categories.value = res.date;
// })

</script>

<style lang="less" scoped>
.banner {
  img {
    width: 100%;
  }
}

.search-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 45px;
  padding: 16px 16px 10px;
  background-color: #ffffff;
  z-index: 9;
}
</style>